<script setup lang="ts">

import {ref} from "vue";

const date = ref(new Date());

const toTitleDate = (date: Date) => {
  const options: Intl.DateTimeFormatOptions = {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  };
  return new Intl.DateTimeFormat('zh-CN', options).format(date);
}

const formatDate = (date: Date) => {
  const options: Intl.DateTimeFormatOptions = {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  };
  return new Intl.DateTimeFormat('zh-CN', options).format(date);
}
</script>

<template>
  <div>
    <h1>调用方法</h1>
    <div>
      <time :title="toTitleDate(date)" :datetime="date">{{ formatDate(date) }}</time>
    </div>
  </div>
</template>

<style scoped>

</style>